<template>
  <div class="GfInformation">
    <a-tabs
      v-show="componentData.attributes.tabIsShow"
      :activeKey="0"
      :tabBarGutter="0"
      :tabBarStyle="{ marginBottom: 0 }"
      :style="{ width: tabWrapperWidth }"
    >
      <a-tab-pane
        tab="资讯分类"
        v-for="(item, index) in Math.ceil(componentData.attributes.showTabNum)"
        :key="index"
        :style="{ width: '200px' }"
      ></a-tab-pane>
    </a-tabs>
    <div class="information-list-wrapper">
      <div
        :class="[
          'information-item',
          componentData.attributes.coverAlign === 'right'
            ? 'right-mode'
            : 'left-mode'
        ]"
        v-for="(item, index) in 3"
        :key="index"
      >
        <div class="left">
          <img class="image" :src="defaultImg" />
        </div>
        <div class="right">
          <div class="title">资讯标题资讯标题资讯标题资讯标题</div>
          <div class="other-info">
            <div class="union-name">发布单位名称</div>
            <div class="date">{{ showDate }}</div>
            <div class="read-num" v-if="componentData.attributes.viewNumIsShow">
              <eye-outlined />
              <div class="num">999</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { EyeOutlined } from '@ant-design/icons-vue'
import { defaultImg } from '@/config'

export default defineComponent({
  name: 'GfInformation',
  components: { EyeOutlined },
  props: ['componentData'],
  setup(props) {
    const tabWrapperWidth = computed(() => {
      if ((props.componentData.attributes.showTabNum * 2) % 2 === 0) {
        return '100%'
      } else {
        return `calc(2px + ${
          ((props.componentData.attributes.showTabNum * 2 + 1) * 100) /
          (props.componentData.attributes.showTabNum * 2)
        }%)`
      }
    })
    const showDate = computed(() => {
      if (props.componentData.attributes.dateMode === 'date') {
        return '2023-12-12'
      } else {
        return '1月前'
      }
    })

    return {
      defaultImg,
      tabWrapperWidth,
      showDate
    }
  }
})
</script>

<style lang="scss" scoped>
.GfInformation {
  overflow: hidden;
  .ant-tabs {
    :deep(.ant-tabs-nav-list) {
      flex: 1;
      .ant-tabs-tab {
        flex: 1;
        justify-content: center;
      }
      .ant-tabs-ink-bar {
        display: none;
      }
      .ant-tabs-tab-active {
        position: relative;
        &::after {
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          content: '';
          display: inline-block;
          width: 30px;
          height: 2px;
          background-color: #1890ff;
        }
      }
    }
  }
  .information-list-wrapper {
    .information-item {
      display: flex;
      padding: 10px;
      border-top: 1px solid #f2f2f2;
      &:first-child {
        border-top: none;
      }
      &.right-mode {
        flex-direction: row-reverse;
        .right {
          padding-left: 0;
          padding-right: 10px;
        }
      }
      .left {
        flex-shrink: 0;
        .image {
          width: 150px;
          height: 75px;
          border-radius: 2px;
          overflow: hidden;
        }
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 10px;
        .title {
          font-weight: bold;
          font-size: 15px;
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .other-info {
          display: flex;
          align-items: center;
          .union-name {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
          }
          .date {
            flex-shrink: 0;
            font-size: 12px;
            margin-left: 5px;
          }
          .read-num {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            margin-left: 5px;
            .num {
              font-size: 12px;
              margin-left: 2px;
            }
          }
        }
      }
    }
  }
}
</style>
